'use client';

import React from 'react';
import { ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import { Tag } from 'antd';

interface BillRecord {
  id: string;
  orderId: string;
  orderNumber: string;
  type: 'expense' | 'recharge';
  amount: number;
  balance: number;
  status: 'success' | 'pending' | 'failed';
  createdAt: string;
  remark: string;
}

interface UserBillListProps {
  userId: string;
}

const UserBillList: React.FC<UserBillListProps> = ({ userId }) => {
  // 模拟账单数据
  const mockData: BillRecord[] = [
    {
      id: '1',
      orderId: '1',
      orderNumber: 'ORDER001',
      type: 'expense',
      amount: -500,
      balance: 4500,
      status: 'success',
      createdAt: '2024-03-28 10:30:00',
      remark: '预约实验',
    },
    {
      id: '2',
      orderId: '',
      orderNumber: '',
      type: 'recharge',
      amount: 1000,
      balance: 5000,
      status: 'success',
      createdAt: '2024-03-27 14:20:00',
      remark: '账户充值',
    },
  ];

  const columns: ProColumns<BillRecord>[] = [
    {
      title: '时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
    },
    {
      title: '类型',
      dataIndex: 'type',
      valueEnum: {
        expense: { text: '支出', status: 'error' },
        recharge: { text: '充值', status: 'success' },
      },
    },
    {
      title: '金额',
      dataIndex: 'amount',
      render: (val) => {
        const amount = Number(val);
        return (
          <span style={{ color: amount >= 0 ? '#52c41a' : '#ff4d4f' }}>
            {amount >= 0 ? '+' : ''}{amount}
          </span>
        );
      },
    },
    {
      title: '账户余额',
      dataIndex: 'balance',
      render: (val) => `¥${val}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (val) => {
        const status = val as BillRecord['status'];
        const statusMap = {
          success: { text: '成功', color: 'success' },
          pending: { text: '处理中', color: 'processing' },
          failed: { text: '失败', color: 'error' },
        };
        const { text, color } = statusMap[status];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '关联订单',
      dataIndex: 'orderNumber',
      render: (val, record) => {
        return record.orderId ? (
          <a href={`/orders/${record.orderId}`}>{val}</a>
        ) : (
          '-'
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
    },
  ];

  return (
    <ProTable<BillRecord>
      columns={columns}
      dataSource={mockData}
      rowKey="id"
      pagination={{
        pageSize: 10,
      }}
      search={false}
      dateFormatter="string"
      headerTitle="账单记录"
      options={false}
    />
  );
};

export default UserBillList; 